<template>
	<div class="container">
		<div class="my_hp">
			<div class="hp_picture">
				<img src="../../../assets/logo.png">
				<div class="username">
					<!-- <a href="" class="userinfo">登录/注册</a> -->
					<router-link to="/Login" class="uesrinfo" v-if="this.$store.state.message=='登陆注册'?true:false"><span class="userinfo">{{this.$store.state.message}}</span></router-link>
					<span class="userinfo" v-if="this.$store.state.message=='登陆注册'?false:true">{{this.$store.state.message}}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return {
			}
		},
	}
</script>

<style>
	.container {
		background-color: #fff;
	}

	.my_hp {
		width: 100%;
		position: relative;
		margin-top: 46px;
		background-color: #ccc;
	}

	.my_hp .hp_picture {
		z-index: 2;
		background-color: #e80018;
		overflow: hidden;
		position: relative;
		width: 100%;
		padding-bottom: 15px;
	}

	.my_hp .hp_picture img {
		margin-top: 11px;
		margin-left: 5%;
		float: left;
		width: 20%;
		border-radius: 60% 60%;
	}

	.my_hp .username {
		font-size: 14px;
		font-weight: 700;
		color: #fff;
		position: absolute;
		height: 92 px;
		left: 50%;
		top: 50%;
		margin-left: -42px;
		margin-top: -26px;
	}

	.userinfo {
		border-radius: 40px;
		font-size: 12px;
		margin-top: 5px;
		height: 28px;
		line-height: 28px;
		color: #000;
		border: 0;
		background-color: #fff;
		padding: 8px 16px;
	}
</style>
